<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small{
            background-color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .widget-small .fa{
            float: left;
            width: 40%;
            line-height: 80px;
            color: #FFFFFF;
        }
        .widget-user .fa{
            background-color: #029789;
        }
        .widget-visit .fa{
            background-color: #17a2b8;
        }
        .widget-message .fa{
            background-color: #fbad4c;
        }
        .widget-like .fa{
            background-color: #ff646d;
        }
        .widget-small-info{
            float: left;
            text-align: left;
            width: 40%;
            margin-left: 20px;
            margin-top: 18px;
            line-height: 24px;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce{
            min-height: 466px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }
        .alert {
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
    </style>
</head>
<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-user">
            <i class="icon fa fa-users fa-3x"></i>
            <div class="widget-small-info">
                <h4>用户</h4>
                <span>[[${membercount}]]</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-visit">
            <i class="icon fa fa-line-chart fa-3x"></i>
            <div class="widget-small-info">
                <h4>信息</h4>
                <span>[[${messagecount}]]</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-message">
            <i class="icon fa fa-comments-o fa-3x"></i>
            <div class="widget-small-info">
                <h4>商户</h4>
                <span>[[${storecount}]]</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-like">
            <i class="icon fa fa-star fa-3x"></i>
            <div class="widget-small-info">
                <h4>总收入</h4>
                <span>[[${allmoney}]]</span>
            </div>
        </div>
    </div>
</div>      
        <div class="layui-row layui-col-space15">
         <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">用户新增趋势</div>
                    <div class="layui-card-body">
                        <div style="width: 100%; height: 300px;" id="Usering">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                     <div class="layui-card-header">信息发布趋势</div>
                    <div class="layui-card-body">
                        <div  style="width: 100%; height: 300px;" id="Message">
                           
                        </div>
                    </div>
                </div>
            </div>
             <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">商户入驻趋势</div>
                    <div class="layui-card-body">
                        <div style="width: 100%; height: 300px;" id="Store">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                     <div class="layui-card-header">支付趋势</div>
                    <div class="layui-card-body">
                        <div  style="width: 100%; height: 300px;" id="Pay">
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
   
<script th:replace="/common/agenttemplate :: agentscript"></script>
 <script>
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.config({
            version: 1,
            base: '/js/plugins/'
        }).use(['element', 'echarts'], function () {
            var element = layui.element,
                $ = layui.jquery,
                echarts = layui.echarts;
            // 基于准备好的dom，初始化echarts实例
            var  Usering = echarts.init(document.getElementById('Usering')),
            Message = echarts.init(document.getElementById('Message')),
            Pay = echarts.init(document.getElementById('Pay')),
            Store = echarts.init(document.getElementById('Store'));
            Usering.showLoading(); //数据加载完之前先显示一段简单的loading动画
            Message.showLoading(); //数据加载完之前先显示一段简单的loading动画
            Store.showLoading();
            Pay.showLoading();
        	
            var names = []; //类别数组（实际用来盛放X轴坐标值）
    		var nums = []; //销量数组（实际用来盛放Y坐标值）
     
    		$.ajax({
    			type : "post",
    			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    			url : "/agent/day/list", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
    			data : {},
    			dataType : "json", //返回数据形式为json
    			success : function(result) {
    				var names = []; //类别数组（实际用来盛放X轴坐标值）
    	    		var nums = []; //销量数组（实际用来盛放Y坐标值）
    	     
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				if (result) {
    					$.each(result.data, function (key, value) {
    					    names.push(key);
    					    nums.push(value);
     					});
    					Usering.hideLoading(); //隐藏加载动画
    					Usering.setOption({ //加载数据图表
    						 title: {
    		                       // text: '商品订单'
    		                    },
    		                    tooltip: {},
    		                    legend: {
    		                        data: ['数量']
    		                    },
    		                   
    		                yAxis: {type: 'value'},
    						xAxis : {
    							data : names
    						},
    						series : [ {
    							// 根据名字对应到相应的系列
    							 type: 'line',//柱状
    							name : '用户量',
    							data : nums
    						} ]
    					});
     
    				}
     
    			},
    			error : function(errorMsg) {
    				//请求失败时执行该函数
    				alert("图表请求数据失败!");
    				Usering.hideLoading();
    			}
    		}) 
            
    		
    		  $.ajax({
    			type : "post",
    			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    			url : "/agent/day/messagelist", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
    			data : {},
    			dataType : "json", //返回数据形式为json
    			success : function(result) {
    				var names = []; //类别数组（实际用来盛放X轴坐标值）
    	    		var nums = []; //销量数组（实际用来盛放Y坐标值）
    	     
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				if (result) {
    					$.each(result.data, function (key, value) {
    					    names.push(key);
    					    nums.push(value);
     					});
    					Message.hideLoading(); //隐藏加载动画
    					Message.setOption({ //加载数据图表
    						 title: {
    		                       // text: '商品订单'
    		                    },
    		                    tooltip: {},
    		                    legend: {
    		                        data: ['数量']
    		                    },
    		                   
    		                yAxis: {type: 'value'},
    						xAxis : {
    							data : names
    						},
    						series : [ {
    							// 根据名字对应到相应的系列
    							 type: 'line',//柱状
    							name : '信息量',
    							data : nums
    						} ]
    					});
     
    				}
     
    			},
    			error : function(errorMsg) {
    				//请求失败时执行该函数
    				alert("图表请求数据失败!");
    				Message.hideLoading();
    			}
    		}) 
    		 $.ajax({
    			type : "post",
    			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    			url : "/agent/day/storelist", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
    			data : {},
    			dataType : "json", //返回数据形式为json
    			success : function(result) {
    				var names = []; //类别数组（实际用来盛放X轴坐标值）
    	    		var nums = []; //销量数组（实际用来盛放Y坐标值）
    	     
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				if (result) {
    					$.each(result.data, function (key, value) {
    					    names.push(key);
    					    nums.push(value);
     					});
    					Store.hideLoading(); //隐藏加载动画
    					Store.setOption({ //加载数据图表
    						 title: {
    		                       // text: '商品订单'
    		                    },
    		                    tooltip: {},
    		                    legend: {
    		                        data: ['数量']
    		                    },
    		                   
    		                yAxis: {type: 'value'},
    						xAxis : {
    							data : names
    						},
    						series : [ {
    							// 根据名字对应到相应的系列
    							 type: 'line',//柱状
    							name : '商户入驻量',
    							data : nums
    						} ]
    					});
     
    				}
     
    			},
    			error : function(errorMsg) {
    				//请求失败时执行该函数
    				alert("图表请求数据失败!");
    				Store.hideLoading();
    			}
    		}) 
    		
    		
    		 $.ajax({
    			type : "post",
    			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    			url : "/agent/day/paylist", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
    			data : {},
    			dataType : "json", //返回数据形式为json
    			success : function(result) {
    				var names = []; //类别数组（实际用来盛放X轴坐标值）
    	    		var nums = []; //销量数组（实际用来盛放Y坐标值）
    	     
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				if (result) {
    					$.each(result.data, function (key, value) {
    					    names.push(key);
    					    nums.push(value);
     					});
    					Pay.hideLoading(); //隐藏加载动画
    					Pay.setOption({ //加载数据图表
    						 title: {
    		                       // text: '商品订单'
    		                    },
    		                    tooltip: {},
    		                    legend: {
    		                        data: ['数量']
    		                    },
    		                   
    		                yAxis: {type: 'value'},
    						xAxis : {
    							data : names
    						},
    						series : [ {
    							// 根据名字对应到相应的系列
    							 type: 'line',//柱状
    							name : '支付金额',
    							data : nums
    						} ]
    					});
     
    				}
     
    			},
    			error : function(errorMsg) {
    				//请求失败时执行该函数
    				alert("图表请求数据失败!");
    				Pay.hideLoading();
    			}
    		}) 
            window.onresize = function () {//用于使echarts自适应高度和宽度
    			Usering.resize();
    			Store.resize();
    			Message.resize();
    			Pay.resize();
    			
             };
          
        });
    </script>
</body>
</html>

